<script>
	import anime from 'animejs';
	let animation

	function play(e) {

		if (animation != undefined) {
			animation.play();
		} else {
	animation= anime({
				targets: '.play-pause-demo .el',
				translateX: 270,
				delay: function (el, i) {
					return i * 100;
				},
				direction: 'alternate',
				loop: true,
				autoplay: false,
				easing: 'easeInOutSine'
			});
			animation.play();
		}
	}
	function pause(params) {
		animation.pause();
	}
	function reverse(params) {
		animation.reverse();
	}
</script>

<div class="demo-content play-pause-demo">
	<div class="line">
		<div class="shadow small square" />
		<div class="small square el" />
	</div>
	<div class="line">
		<div class="shadow small square" />
		<div class="small square el" />
	</div>
	<div class="line">
		<div class="shadow small square" />
		<div class="small square el" />
	</div>
	<div class="line controls ">
		<button class="play" on:click={play}>Play</button>
		<button class="pause" on:click={pause}>Pause</button>
		<button class="reverse" on:click={reverse}>reverse</button>
	</div>
</div>

<style>
	button {
		position: relative;
		display: block;
		margin: 0 0 0 -1px;
		padding: 5px 10px;
		font-size: 14px;
		text-transform: uppercase;
		border: 1px solid #f40;
		background-color: transparent;
		color: #f40;
	}
	.motion-path {
		position: relative;
		width: 256px;
		margin: auto;
	}
	.shadow {
		position: absolute;
		opacity: 0.2;
	}
	.square {
		pointer-events: none;
		position: relative;
		width: 28px;
		height: 28px;
		margin: 1px;
		background-color: currentColor;
		font-size: 14px;
	}
	.follow-path {
		position: absolute;
		top: -9px;
		left: -9px;
	}
	.small {
		width: 18px;
		height: 18px;
		background-color: yellowgreen;
	}

	/* .small .triangle {
    border-width: 0 10px 17px 10px;
  } */
</style>
